<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>上传学员照片</title>
	<link rel="stylesheet" href="/assets/common/libs/layui/css/layui.css"/>
</head>
<body>
<div class="layui-upload">
	<button type="button" class="layui-btn" id="test1">上传图片</button>
	<div class="layui-upload-list">
		<img class="layui-upload-img" id="demo1">
		<p id="demoText"></p>
	</div>
	<div style="width: 95px;">
		<div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
			<div class="layui-progress-bar" lay-percent=""></div>
		</div>
	</div>
</div>
<!--<div class="layui-upload-drag" style="margin: 32% 32% 0 32%;" id="test8">
    <i class="layui-icon"></i>
    <p>点我上传</p>
    <div class="layui-hide" id="uploadDemoView">
        <hr>
        <img id="showPhoto" src="" alt="上传成功后渲染" style="max-width: 196px">
    </div>
</div>
<button type="button" class="layui-btn"  style="margin: 5% 0 0 35%;" id="test9">开始上传</button>-->
</body>
<script type="text/javascript" src="/assets/common/libs/layui/layui.js"></script>
<script>
	layui.use(['upload', 'element', 'layer'], function () {
		var $ = layui.jquery;
		var upload = layui.upload;

		//选完文件后不自动上传
		/*upload.render({
			elem: '#test8'
			,url: 'https://httpbin.org/post' //此处配置你自己的上传接口即可
			,auto: false
			,bindAction: '#test9'
			,before: function(obj){
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#showPhoto').attr('src', result); //图片链接（base64）
				});
			}
			,done: function(res){
				layer.msg('上传成功');
				console.log(res)
			}
		});*/

		//常规使用 - 普通图片上传
		var uploadInst = upload.render({
			elem: '#test1'
			,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
			,before: function(obj){
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#demo1').attr('src', result); //图片链接（base64）
				});

				element.progress('demo', '0%'); //进度条复位
				layer.msg('上传中', {icon: 16, time: 0});
			}
			,done: function(res){
				//如果上传失败
				if(res.code > 0){
					return layer.msg('上传失败');
				}
				//上传成功的一些操作
				//……
				$('#demoText').html(''); //置空上传失败的状态
			}
			,error: function(){
				//演示失败状态，并实现重传
				var demoText = $('#demoText');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function(){
					uploadInst.upload();
				});
			}
			//进度条
			,progress: function(n, elem, e){
				element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
				if(n == 100){
					layer.msg('上传完毕', {icon: 1});
				}
			}
		});
	})

</script>
</html>